<template>
    <div class="app-container">
        <!-- 查询 -->
        <el-form ref="form"   :inline="true" label-width="80px">
            <el-form-item>
                <el-button v-if="hasPermission('AdminBeautyCategoriesProvider.saveBeautyCategory')" type="primary" @click="addFirstClass1()">新增一级分类</el-button>
            </el-form-item>
            <div class="option-item">
                <el-tag>全部展开</el-tag>
                <el-switch
                    v-model="defaultExpandAll"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                />
            </div>
        </el-form>
        <!-- 新增一级分类弹出窗 -->
        <el-dialog
            title="新增一级分类"
            :visible.sync="dialogVisible1"
            :before-close="addHandleClose1"
            width="468px">
            <!-- 输入框 -->
            <el-form :inline="true"
            :rules="rules" 
            ref = addForm1 
            label-width="80px"
            label-position="right"
            :model="addForm1">
                <el-form-item label="所属板块"  prop="plate">
                    <el-select v-model="addForm1.plate" placeholder="请选择">
                        <el-option
                        v-for="item in plateOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称"  prop="name">
                    <el-input v-model="addForm1.name"></el-input>
                </el-form-item>
                <el-form-item label="排序"  prop="sort">
                    <el-input type="number" v-model.number="addForm1.sort"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="image">
                    <el-upload
                        action="#"
                        ref ="upload"
                        list-type="picture-card"
                        :limit="1"
                        :on-exceed = "exceeds"
                        :on-change="changeUpload"
                        :on-remove="handleRemove"
                        :class="{hide:hideUpload}"
                        :auto-upload="false">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                            <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url" alt=""
                            >
                            </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addHandleClose1()">取 消</el-button>
                <el-button type="primary" @click="addSubmit1('addForm1')">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 列表展示 -->
        <tree-table v-loading="tableLoading"  :default-expand-all="defaultExpandAll" :data="data" :columns="columns" >
            <template  slot="level"  slot-scope="{scope}">      
                {{scope.row.level | levelFn}}
            </template> 
            <!-- 图片 -->
            <template  slot="scopeImg"  slot-scope="{scope}">      
                <img :src="imgUrl+'/'+scope.row.image"  min-width="70" height="70" />
            </template> 
            <!-- 状态 -->
            <template slot="status" slot-scope="{scope}">
                <el-switch
                class="switchStyle"
                v-model="scope.row.status"
                @click.native="swithFn(scope.row.id,scope.row.status,'1')"
                active-color="#13ce66"
                inactive-color="#eee"
                :active-value="0"
                :inactive-value="1">
                </el-switch>
            </template>
            <!-- 首页展示 -->
            <template slot="isRecommend"  slot-scope="{scope}">
                <!-- {{scope.row.isRecommend}} -->
                <el-switch
                    class="switchStyle"
                    v-model="scope.row.isRecommend"
                    
                    @click.native="swithFn(scope.row.id,scope.row.isRecommend,'2')"
                    active-color="#13ce66"
                    inactive-color="#eee"
                    :active-value="2"
                    :inactive-value="1">
                </el-switch>
            </template>
            <!-- 医美展示 -->
            <template slot="isBeautyrecom"  slot-scope="{scope}">
                <el-switch
                    class="switchStyle"
                    v-if="scope.row.level==0"
                    v-model="scope.row.isBeautyrecom"
                    @click.native="swithFn(scope.row.id,scope.row.isBeautyrecom,'3')"
                    active-color="#13ce66"
                    inactive-color="#eee"
                    :active-value="2"
                    :inactive-value="1">
                </el-switch>
            </template>
            <!-- 操作 -->
            <template slot="operation" slot-scope="{scope}">
                <div v-if="hasPermission('AdminBeautyCategoriesProvider.saveBeautyCategory')">
                    <el-button v-if="scope.row.level!=2" type="text" @click.native="addChirld(scope.row)">添加子级</el-button>
                </div>
                <el-button v-if="hasPermission('AdminBeautyCategoriesProvider.updateBeautyCategory')" type="text"  @click="editMenu(scope.row)">编辑</el-button>
                <el-button v-if="hasPermission('AdminBeautyCategoriesProvider.deleteBeautyCategory')" type="text"  @click="deleteMenu(scope.row)">删除</el-button>
            </template>
        </tree-table>
        <!-- 二级分类新增 -->
        <el-dialog
            title="新增二级分类"
            :visible.sync="dialogVisible2"
            :before-close="addHandleClose2"
            width="468px">
            <!-- 输入框 -->
            <el-form :inline="true"
            :rules="rules" 
            ref = addForm2 
            label-width="80px"
            label-position="right"
            :model="addForm2">
                <el-form-item label="上级分类" >
                    <el-input readonly v-model="addForm2.parentName"></el-input>
                </el-form-item>
                <el-form-item label="分类名称" prop="name">
                    <el-input  v-model="addForm2.name"></el-input>
                </el-form-item>
                <el-form-item label="排序"  prop="sort">
                    <el-input type="number" v-model.number="addForm2.sort"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="image">
                    <el-upload
                        action="#"
                        ref ="upload"
                        list-type="picture-card"
                        :limit="1"
                        :on-exceed = "exceeds"
                        :on-change="changeUpload"
                        :on-remove="handleRemove"
                        :class="{hide:hideUpload}"
                        :auto-upload="false">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                            <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url" alt=""
                            >
                            </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addHandleClose2()">取 消</el-button>
                <el-button type="primary" @click="addSubmit2()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 三级分类新增 -->
        <el-dialog
            title="新增三级分类"
            :visible.sync="dialogVisible3"
            :before-close="addHandleClose3"
            width="800px">
            <!-- 输入框 -->
            <el-form :inline="true"
            :rules="rules" 
            ref = addForm3 
            label-width="80px"
            label-position="right"
            :model="addForm3">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="上级分类" >
                            <el-input readonly v-model="addForm3.parentName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="分类名称" prop="name">
                            <el-input  v-model="addForm3.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序"  prop="sort">
                            <el-input type="number" v-model.number="addForm3.sort"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="分类简介">
                            <el-input v-model="addForm3.descript"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="图片" prop="image">
                            <el-upload
                                action="#"
                                ref ="upload"
                                list-type="picture-card"
                                :limit="1"
                                :on-exceed = "exceeds"
                                :on-remove="handleRemove"
                                :on-change="changeUpload"
                                :class="{hide:hideUpload}"
                                :auto-upload="false">
                                    <i slot="default" class="el-icon-plus"></i>
                                    <div slot="file" slot-scope="{file}">
                                    <img
                                        class="el-upload-list__item-thumbnail"
                                        :src="file.url" alt=""
                                    >
                                    </div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="详情">
                            <Tinymce style="width:100%" v-model="addForm3.content"></Tinymce>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addHandleClose3()">取 消</el-button>
                <el-button type="primary" @click="addSubmit3()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑 -->
        <!-- 编辑一级分类 -->
        <el-dialog
            title="编辑一级分类"
            :visible.sync="dialogEdit1"
            :before-close="editHandleClose1"
            width="468px">
            <!-- 输入框 -->
            <el-form :inline="true"
            :rules="rules" 
            ref = editForm1 
            label-width="80px"
            label-position="right"
            :model="editForm1">
                <el-form-item label="所属板块"  prop="plate">
                    <el-select v-model="editForm1.plate" placeholder="请选择">
                        <el-option
                        v-for="item in plateOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类名称"  prop="name">
                    <el-input v-model="editForm1.name"></el-input>
                </el-form-item>
                <el-form-item label="排序"  prop="sort">
                    <el-input type="number" v-model.number="editForm1.sort"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="image">
                    <el-upload
                        action="#"
                        ref ="upload"
                        list-type="picture-card"
                        :limit="1"
                        :file-list="fileList1"
                        :on-exceed = "exceeds"
                        :on-change="changeUpload"
                        :on-remove="handleRemove"
                        :class="{hide:hideUpload}"
                        :auto-upload="false">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                            <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url" alt=""
                            >
                            </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editHandleClose1()">取 消</el-button>
                <el-button type="primary" @click="editSubmit1()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑二级分类 -->
        <el-dialog
            title="编辑二级分类"
            :visible.sync="dialogEdit2"
            :before-close="editHandleClose2"
            width="468px">
            <!-- 输入框 -->
            <el-form :inline="true"
            :rules="rules" 
            ref = editForm2 
            label-width="80px"
            label-position="right"
            :model="editForm2">
                <el-form-item label="上级分类" >
                    <el-input readonly v-model="editForm2.parentName"></el-input>
                </el-form-item>
                <el-form-item label="分类名称" prop="name">
                    <el-input  v-model="editForm2.name"></el-input>
                </el-form-item>
                <el-form-item label="排序"  prop="sort">
                    <el-input type="number" v-model.number="editForm2.sort"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="image">
                    <el-upload
                        action="#"
                        ref ="upload"
                        list-type="picture-card"
                        :limit="1"
                        :file-list="fileList1"
                        :on-exceed = "exceeds"
                        :on-change="changeUpload"
                        :on-remove="handleRemove"
                        :class="{hide:hideUpload}"
                        :auto-upload="false">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                            <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url" alt=""
                            >
                            </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editHandleClose2()">取 消</el-button>
                <el-button type="primary" @click="editSubmit2()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑三级分类 -->
        <el-dialog
            title="编辑三级分类"
            :visible.sync="dialogEdit3"
            :before-close="editHandleClose3"
            width="800px">
            <!-- 输入框 -->
            <el-form :inline="true"
            :rules="rules" 
            ref = editForm3 
            label-width="80px"
            label-position="right"
            :model="editForm3">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="上级分类" >
                        <el-input readonly v-model="editForm3.parentName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="分类名称" prop="name">
                        <el-input  v-model="editForm3.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="排序"  prop="sort">
                        <el-input type="number" v-model.number="editForm3.sort"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="分类简介">
                        <el-input v-model="editForm3.descript"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="图片" prop="image">
                        <el-upload
                            action="#"
                            ref ="upload"
                            list-type="picture-card"
                            :limit="1"
                            :file-list="fileList1"
                            :on-exceed = "exceeds"
                            :on-change="changeUpload"
                            :on-remove="handleRemove"
                            :class="{hide:hideUpload}"
                            :auto-upload="false">
                                <i slot="default" class="el-icon-plus"></i>
                                <div slot="file" slot-scope="{file}">
                                <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url" alt=""
                                >
                                </div>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="详情">
                        <Tinymce style="width:100%" v-model="editForm3.content"></Tinymce>
                    </el-form-item>
                </el-col>
            </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editHandleClose3()">取 消</el-button>
                <el-button type="primary" @click="editSubmit3()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import treeTable from '@/components/TreeTable'
import { findAllBeautyCategoryList,updateBeautyCategoryStatus,saveBeautyCategory,deleteBeautyCategory,updateBeautyCategory } from '@/api/medicalClassifyList'
import { policy } from '@/api/policy'
import $ from 'jquery'


export default {
  name:"medicalClassifyList",
  data() {
    return {
        changes:false,
        imgUrl:"",
        imgFlag:"",
        hideUpload: false,
        fileList1:[],
        limitCount:1,
        plateOption: [{
          value: '0',
          label: '医美'
        }, {
          value: '1',
          label: '口腔管理'
        }, {
          value: '2',
          label: '健康管理'
        }],
        title2:"",
        dialogVisible1: false,//弹出窗显影
        dialogVisible2: false,//弹出窗显影
        dialogVisible3: false,//弹出窗显影
        dialogEdit1:false,
        dialogEdit2:false,
        dialogEdit3:false,
        defaultExpandAll: false,
        disabled: false,
        addForm1:{
            parentId:0,
            level:0,
            plate: '',
            name:"",
            sort:"",
            image:""
        },
         addForm2:{
            parentId:"",
            level:1,
            parentName:"",
            plate: '',
            name:"",
            sort:""
        },
        addForm3:{
            parentId:"",
            level:2,
            parentName:"",
            plate: '',
            name:"",
            sort:"",
            image:"",
            content:""
        },
        editForm1:{
            id:"",
            plate: '',
            name:"",
            sort:"",
            image:""
        },
        editForm2:{
            id:"",
            parentName:"",
            name:"",
            sort:"",
            image:""
        },
        editForm3:{
            id:"",
            parentName:"",
            name:"",
            sort:"",
            image:"",
            content:""
        },
        rules: {
            plate: [
                { required: true, message: '请输入所属板块', trigger: 'blur' }
            ],
            name: [
                { required: true, message: '请输入分类名称', trigger: 'blur' }
            ],
            sort: [
                { required: true, message: '请输入排序', trigger: 'blur' }
            ],
            image: [
                { required: true }
            ]
        },
        tableLoading:false,
        columns: [
            {
                label: 'ID',
                key: 'id',
                align: 'left'
            },
            {
                label: '分类名称',
                key: 'name',
                width: 300,
                expand:true,
                align: 'left'
            },
            {
                label: '分类等级',
                key: 'level',
                align: 'left'
            },
            {
                label: '分类图片',
                key: 'scopeImg',
                align: 'left'
            },
            {
                label: '项目数量',
                key: 'projectCount',
                align: 'left'
            },
            {
                label: '排序',
                key: 'sort',
                align: 'left'
            },
            {
                label: '状态',
                key: 'status',
                align: 'left'
            },
            {
                label: '首页展示',
                key: 'isRecommend',
                align: 'left'
            },
            {
                label: '医美展示',
                key: 'isBeautyrecom',
                align: 'left'
            },
            {
                label: '操作',
                width:400,
                key: 'operation'
            }
        ],
        data: [],
        aliyunOssToken:[],
    }
  },
  watch:{
      'dialogEdit1'(val){
          this.imgStatus(val)
      },
      'dialogEdit2'(val){
          this.imgStatus(val)
      },
      'dialogEdit3'(val){
          this.imgStatus(val)
      }
  },
   // 接收注入的数据
  inject: [
    'reload'
  ],
  components: { treeTable,Tinymce },
  filters:{
        levelFn(e){
            switch(e){
                case 0:
                    return "一级" 
                case 1:
                    return "二级"
                case 2:
                    return "三级"
                default:
                    return "无"
            }
        }
  },
  mounted(){
        this.getList()
        this.imgUrl = localStorage.getItem("imgUrlPrefix")
        this.getPolicy()
  }, 
  methods:{
        //判断照片状态
        imgStatus(val){
            if(val==false){
              this.fileList1 = []
          }
        },
        //获取签名
        getPolicy(){
            policy().then(res=>{
                console.log("签名")
                this.aliyunOssToken = res.data.data
            })
        },
        //按钮权限
        hasPermission(e){
            return window.helper.hasPermission(e)
        },
        // 全部switch开关
        swithFn(id,status,type){
            let datas
            if(type=="1"){
                datas = {id,status}
            }else{
                if(type=="2"){
                    datas = {
                        id,
                        isRecommend:status
                    }
                }else{
                    if(type=="3"){
                        datas = {id,
                        isBeautyrecom:status
                        }
                    }
                }  
            }
            updateBeautyCategoryStatus(datas).then(res =>{
                if(!res.data.code){
                    this.$message({
                        showClose: true,
                        message: '修改成功',
                        type: 'success'
                    });
                    this.getList()
                }else{
                    this.$message.error(res.data.msg);
                }
            })
        },
        //成功状态弹窗
        succStatus(txt){
            this.$message({
                message: txt+'成功',
                type: 'success'
            });
        },
        //失败状态弹窗
        errorStatus(txt){
            this.$message.error(txt+'失败');
        },
        // 操作添加子级
        addChirld(e){
            // console.log(e)
            // 二级分类添加
            if(e.level==0){
                this.addFirstClass2()
                this.addForm2.parentName = e.name
                this.addForm2.plate = e.plate
                this.addForm2.parentId = e.id
            }
            // 三级分类添加
            if(e.level==1){
                this.addFirstClass3()
                this.addForm3.parentName = e.name
                this.addForm3.plate = e.plate
                this.addForm3.parentId = e.id
            }
        },
        // 操作编辑
        editMenu(e){
            // console.log(e)
            // 一级分类编辑
            if(e.level==0){
                this.editFirstClass1()
                this.editForm1.name = e.name
                this.editForm1.sort = e.sort
                this.editForm1.plate = String(e.plate)
                this.fileList1 = [
                    {
                        url:this.imgUrl + e.image
                    }
                ]
                this.editForm1.image = e.image
                this.hideUpload = true
                this.editForm1.id = e.id    
            }
            //二级分类编辑
            if(e.level==1){
                this.editFirstClass2()
                //没parentName，故先取parentId
                this.editForm2.parentName = e.parentName
                this.editForm2.name = e.name
                this.editForm2.sort = e.sort
                this.editForm2.id = e.id 
                this.fileList1 = [
                    {
                        url:this.imgUrl + e.image
                    }
                ]
                this.hideUpload = true
                this.editForm1.image = e.image   
            }
            // 三级分类编辑
            if(e.level==2){
                console.log(e)
                this.editFirstClass3()
                this.editForm3.name = e.name
                this.editForm3.parentName = e.parentName
                this.editForm3.sort = e.sort
                if(e.descript!=null||e.descript!=""){
                    this.editForm3.descript = e.descript
                }else{
                    this.editForm3.descript = ""
                }
                if(e.content!=null||e.content!=""){
                    this.editForm3.content = e.content
                }else{
                    this.editForm3.content = ""
                }
                this.fileList1 = [
                    {
                        url:this.imgUrl + e.image
                    }
                ]
                this.editForm3.image = e.image
                this.hideUpload = true
                this.editForm3.id = e.id    
            }
        },
        // 获取列表
        getList(){
            this.tableLoading = true
            let datas = {
                pageNum:"1",
                pageSize:"10000"
            }
            findAllBeautyCategoryList(datas).then(res =>{
                console.log(res) 
                this.tableLoading = false
                let resData = res.data.data.list
                this.data = resData
            })
        },
        //新增一级分类
        addFirstClass1(){
            this.hideUpload = false
            this.dialogVisible1 = true
        },
        //关闭一级分类弹窗
        addHandleClose1(){
            this.dialogVisible1 = false
            this.$refs["addForm1"].resetFields();
        },
        // 一级分类确定提交
        addSubmit1(e){
            this.submitUpload()
            this.addForm1.image = this.imgFlag
            let datas = this.addForm1
            // console.log(datas)
            this.$refs[e].validate((valid) => {
                if (valid) {
                    saveBeautyCategory(datas).then(res =>{
                        if(!res.data.code){
                            this.succStatus("添加")
                        }else{
                            this.$message.error(res.data.msg);
                        }
                            this.dialogVisible1 = false
                            this.addForm1.plate = ""
                            this.addForm1.name = ""
                            this.addForm1.sort = ""
                            this.addForm1.image = ""
                            this.$refs.upload.clearFiles()
                            this.$refs["addForm1"].resetFields();
                            this.reload()
                            this.getList()
                        })
                }else{
                    this.$message({
                        showClose: true,
                        message:"都是必填项咯",
                        type: 'warning'
                    });
                } 
            })
        },
        //新增二级分类
        addFirstClass2(){
            this.hideUpload = false
            this.dialogVisible2 = true
        },
        //关闭二级级分类弹窗
        addHandleClose2(){
            this.dialogVisible2 = false
            this.$refs["addForm2"].resetFields();
        },
        //二级分类提交
        addSubmit2(){
            this.submitUpload()
            this.addForm2.image = this.imgFlag
            let datas = this.addForm2
            if(datas.image&&datas.name&&datas.sort){
                saveBeautyCategory(datas).then(res =>{
                    if(!res.data.code){
                        this.succStatus("添加")
                    }else{
                        this.$message.error(res.data.msg);
                    }
                    this.dialogVisible2 = false
                    this.addForm2.parentId = ""
                    this.addForm2.parentName = ""
                    this.addForm2.plate = ""
                    this.addForm2.name = ""
                    this.addForm2.sort = ""
                    this.$refs["addForm2"].resetFields();
                    this.reload()
                    this.getList()
                })
            }else{
                this.$message({
                    showClose: true,
                    message:"都是必填项咯",
                    type: 'warning'
                });
            } 
        },
        // 新增三级分类
        addFirstClass3(){
            this.hideUpload = false
            this.dialogVisible3 = true
        },
        // 关闭三级分类
        addHandleClose3(){
            this.dialogVisible3 = false
            this.$refs["addForm3"].resetFields();
        },
        // 三级分类提交
        addSubmit3(){
            this.submitUpload()
            this.addForm3.image = this.imgFlag
            let datas = this.addForm3
            if(datas.image&&datas.name&&datas.sort){
                saveBeautyCategory(datas).then(res =>{
                    // console.log(res)
                    if(!res.data.code){
                        this.succStatus("添加")
                    }else{
                        this.$message.error(res.data.msg);
                    }
                    this.dialogVisible3 = false
                    this.addForm3.plate = ""
                    this.addForm3.name = ""
                    this.addForm3.parentName = ""
                    this.addForm3.sort = ""
                    this.addForm3.image = ""
                    this.$refs.upload.clearFiles()
                    this.$refs["addForm3"].resetFields();
                    this.reload()
                    this.getList()
                })
            }else{
                this.$message({
                    showClose: true,
                    message:"都是必填项咯",
                    type: 'warning'
                });
            } 
        },
        //图片上传限制提示
        exceeds(){
            this.$message.error('只能上传一张图片');
        },
        //编辑-打开一级分类
        editFirstClass1(){
            this.hideUpload = false
            this.dialogEdit1 = true
        },
        // 编辑-取消一级分类
        editHandleClose1(){
            this.dialogEdit1 = false
        },
        // 编辑-提交一级分类
        editSubmit1(){
            // this.submitUpload(this.editForm1.image)
            if(this.changes){
                this.submitUpload()
                this.editForm1.image = this.imgFlag
            }
            // console.log(this.editForm1)
            let datas = this.editForm1
            updateBeautyCategory(datas).then(res =>{
                // console.log(res)
                this.getList()
                if(!res.data.code){
                    this.succStatus("编辑")
                }else{
                    this.$message.error(res.data.msg);
                }
            })
            this.dialogEdit1 = false
        },
        //编辑-打开二级分类
        editFirstClass2(){
            this.dialogEdit2 = true
        },
        // 编辑-取消二级分类
        editHandleClose2(){
            this.dialogEdit2 = false
        },
        // 编辑-提交二级分类
        editSubmit2(){
            if(this.changes){
                this.submitUpload()
                this.editForm2.image = this.imgFlag
            }
            let datas = this.editForm2
            updateBeautyCategory(datas).then(res =>{
                // console.log(res)
                this.getList()
                if(!res.data.code){
                    this.succStatus("编辑")
                }else{
                    this.$message.error(res.data.msg);
                }
            })
            this.dialogEdit2 = false
        },
        //编辑-打开三级分类
        editFirstClass3(){
            this.dialogEdit3 = true
        },
        // 编辑-取消三级分类
        editHandleClose3(){
            this.dialogEdit3 = false
        },
        // 编辑-提交三级分类
        editSubmit3(){
            // this.submitUpload(this.editForm1.image)
            if(this.changes){
                this.submitUpload()
                this.editForm3.image = this.imgFlag
            }
            // console.log(JSON.stringify(this.editForm3))
            let datas = this.editForm3
            updateBeautyCategory(datas).then(res =>{
                // console.log(res)
                this.getList()
                if(!res.data.code){
                    this.succStatus("编辑")
                }else{
                    this.$message.error(res.data.msg);
                }
            })
            this.dialogEdit3 = false
        },
        // 删除
        deleteMenu(e){
            let datas = {id:e.id}
            // console.log(datas)
            this.$confirm('删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteBeautyCategory(datas).then(res =>{
                    // console.log(datas)
                    if(!res.data.code){
                        this.succStatus("删除")
                        this.getList()
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 图片上传改变时
        changeUpload(file, fileList){
            if(fileList.length >= this.limitCount){
                this.changes = true
            }else{
                this.changes = false
            }
            this.hideUpload = fileList.length >= this.limitCount;
            // console.log(file, fileList);
        },
        // 图片移除时
        handleRemove(file, fileList) {
            // this.changes = true
            if(fileList.length >= this.limitCount){
                this.changes = true
            }else{
                this.changes = false
            }
            this.hideUpload = fileList.length >= this.limitCount;
            // console.log(file, fileList);
        },
        //图片上传
        submitUpload() {
            this.getPolicy()
            // console.log(this.$refs.upload.uploadFiles[0])
            let _self = this
            let file
            try{
                file = this.$refs.upload.uploadFiles[0].name
            }catch(e){
                return "";
            }
            console.log(file)
            var getSuffix = function (fileName) {
                var pos = fileName.lastIndexOf(".");
                var suffix = '';
                if (pos != -1) {
                    suffix = fileName.substring(pos);
                }
                return suffix;
            }
            //利用时间戳生成uuid
            var d = new Date().getTime();
            if (window.performance && typeof window.performance.now === "function") {
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            //定义文件名
            var filename = uuid + getSuffix(file);
            //注意formData里append添加的键的大小写
            var formData = new FormData();
            //存储在oss的文件路径
            formData.append('OSSAccessKeyId', _self.aliyunOssToken.accessid); 
            //accessKeyId
            formData.append('key', _self.aliyunOssToken.dir+ "/"+ filename); 
            //policy
            formData.append('policy', _self.aliyunOssToken.policy); 
            //签名
            //如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
            formData.append('Signature', _self.aliyunOssToken.signature); 
            // console.log( _self.aliyunOssToken.signature)
            // 文件详情
            formData.append("file", this.$refs.upload.uploadFiles[0].raw);
            //成功后返回的操作码
            formData.append('success_action_status', 200); 
            var url = _self.aliyunOssToken.host;
            var fileUrl = _self.aliyunOssToken.host +'/'+ _self.aliyunOssToken.dir +"/"+ filename;
            this.imgFlag = '/'+ _self.aliyunOssToken.dir +"/"+ filename;
            // console.log(this.$refs.upload.uploadFiles[0].raw)
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                // async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    // console.log(fileUrl);
                    console.log(data);
                },
                error: function (data) {
                    console.log(data);
                    _self.$notify.error({
                        title: '错误',
                        message: '图片上传失败'
                    });
                }
            });

        }
  }
}
</script>

<style scoped>
.pagesCon{height: 40px;margin-top: 20px}
.pagesCon>div{float: right;}
.option-item{display: inline-block;
    margin-top: 6px;
}
</style>
